<template>
  <div class="discoverCon" :class="{'showRightSidebar': 0}">
    <!-- 主内容 -->
    <div class="main-content">
      <!-- 对话内容部分 -->
      <div class="content">
        <div class="messageCon" ref="chatContainer" @scroll="onScroll">
          <!-- 首条系统欢迎语 -->
          <div class="chat-bot">
            <div class="welcomeSpeech">
              <div class="welcomeSpeechLf">
                <!-- <img src="@/assets/content/dialogue2x.png" alt="" class="head"> -->
                <div class="welcomeSpeechCn">
                  <span>Hi，我是iMAi，您的专属技术经理人~如果您有成果合作或成果转化的需求，我可以为您提供以下服务：</span>
				  <span>匹配合作方：您可以通过对话或上传资料，告诉我成果相关的信息，例如：成果名称、简介、应用领域和场景、解决问题、完成人、完成单位、完成阶段、期望合作方式等，我会为您匹配合适的合作方，信息提供越详细匹配越精准哦~</span>
                  <!-- <span></span> -->
                </div>
              </div>
            </div>
          </div>
          <div v-for="(message, index) in conversation" :key="index" class="chat-message">
            <!-- 机器人消息在左 -->
            <div class="chat-bot" v-if="message.type === 'bot'">
              <div class="bot-message-container">
               
                <div class="bot-message">
                  <!-- <p>{{ message.text }}</p> -->
                   <template v-if="message.text">
                    <!-- <vue-markdown :source="message.text" class="bot-message-markdown"></vue-markdown> -->
					<zero-markdown-view class="zero-markdown-view-markdown" :markdown="message.text"></zero-markdown-view>
                   </template>
				   <div class="bot-button">
				       <div class="copy" v-clipboard:copy="message.text" v-clipboard:success="copyToClipboard">
				         <img src="@/assets/content/icon_copy@2x.png" alt="">
				         <!-- <span>复制</span> -->
				       </div>
				       <div class="reset" @click="regenerateMessage(message)">
				         <img src="@/assets/content/icon_reset@2x.png" alt="">
				         <!-- <span>重新生成</span> -->
				       </div>
				     </div>
                </div>
              </div>
              
            </div>
            <!-- 用户消息在右 -->
            <div class="chat-user" v-if="message.type === 'user'">
              <div class="user-message-container">
                <div class="user-message">
                  <p>{{ message.text }}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Loading -->
          <div class="chat-message">
            <div class="chat-bot loading" v-show="isLoading">
              <div class="bot-message-container">
                <div class="bot-message">
                  <Loading :loading="isLoading" message="正在查找" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sxwise_right" @click="scrollToBottomClick" v-if="showArrow">
          <el-avatar size="small" :src="srcArrow"></el-avatar>
        </div>
        
      </div>
	  <!-- 底部输入栏 -->
	  
	    <div class="input-bar aaaaa" v-if="keywordShow"   :style="{ 'bottom': keyboardHeight + 'px' }">
	      <div class="search-area">
	     <!--    <img src="@/assets/icon_arrow.svg" alt="" class="icon_arrow" v-if="showArrow">-->
	        <img src="@/assets/content/loadIcon.png"  class="load-icon" alt="Chatbot Icon" style="margin-right: 0.5vw;cursor: pointer;"  @click="addDialogue"/>
	        <div class="search-input">
	          <input v-model="searchQuery" @keydown.enter="submitSearch" type="text" @focus="handleFocus"
	  @blur="handleBlur"
	  :placeholder="placeholderText"/>
	          <div @click="submitSearch" class="send-button" v-if="!isStreaming">
	            <!-- <span>发送</span> -->
	            <img src="@/assets/content/send@2x.png" alt="Send Icon" class="send-icon" />
	          </div>
	          <div v-else class="stop" @click="stopStreaming" style="margin-left:5px"><img src="@/assets/icon_stop.svg" alt="Send Icon" class="stop-icon" style="cursor: pointer;vertical-align: middle;" /></div>
	        </div>
	      </div>
	    </div>
		<div class="input-bar" v-if="!keywordShow">
		    <div class="search-area">
		   <!--    <img src="@/assets/icon_arrow.svg" alt="" class="icon_arrow" v-if="showArrow">-->
		      <img src="@/assets/content/keyboardIcon.png"  class="load-icon1" alt="Chatbot Icon" style="margin-right: 0.5vw;cursor: pointer;"  @click="addDialogue"/>
		      <div class="search-input">
		       <!-- <input v-model="searchQuery" @keydown.enter="submitSearch" type="text" @focus="handleFocus"
		@blur="handleBlur"
		:placeholder="placeholderText"/> -->
		<!-- <div class="anzhu">按住说话</div> -->
		<div class="anzhu"><Recorder @tapeText="tapeText"></Recorder></div>
		
		        <div @click="submitSearch" class="send-button" v-if="!isStreaming">
		          <!-- <span>发送</span> -->
		          <img src="@/assets/content/sendIcon.png" alt="Send Icon" class="send-icon" />
		        </div>
		        <div v-else class="stop" @click="stopStreaming" style="margin-left:5px"><img src="@/assets/icon_stop.svg" alt="Send Icon" class="stop-icon" style="cursor: pointer;vertical-align: middle;" /></div>
		      </div>
		    </div>
		  </div>
    </div>
    
    
    <ErrorModal ref="errorModal" :message="errorMessage" :duration="3000" />
  </div>
</template>

<script>
//import { getAboutUs } from "@/api/common";
import {generateWeightedRandomNumber, randomSplitString} from "@/utils/random";
import {checkAndSetUserAndConversationId} from "@/utils/user";

//import dayjs from "dayjs"
// 引入swiper所需的组件
//import VueMarkdown from 'vue-markdown'
//import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import ErrorModal from '@/components/ErrorModal.vue' //转化通
// import ContentEnterMixin from '@/mixins/ContentEnterMixin';
import Loading from '@/components/Loading.vue';
import Recorder from '@/components/lpx-recorder/Recorder.vue' //录音
//import "swiper/css/swiper.css";
export default { 
  // mixins: [ContentEnterMixin],
  // 注册组件
  components: {
    //Swiper,
    //SwiperSlide,
    ErrorModal,
    Loading,
	Recorder,
    //VueMarkdown,
  },
  //directives: {
  //  swiper: directive,
  //},
  computed: {
  },
  props: {
     keyboardHeight: '' // 定义接收一个名为message的字符串类型的prop
   },
  data() {
    return {
		keywordShow:true,
		// keyboardHeight:0,
      showArrow: false,
      citeSourceShow:false,
      isLoading: false,
      conversationId:'',
      hasSetConversationId:false,
      isStreaming: false, // 控制流式数据的标志
      errorMessage: "",  // 自定义的异常信息
      searchQuery: '', // 用于绑定搜索输入框
      dialogFormVisible: false,//帮我对接
      webSiteLength: null,
      patentLength: null,
      achievementLength: null,
      classDialog: 'classDialog',
      labelPosition: 'top',
      showClose: false,
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        area: [
          { type: 'date', required: true, message: '请选择区域', trigger: 'change' }
        ],
        industry: [
          { type: 'date', required: true, message: '请选择行业类型', trigger: 'change' }
        ]
      },
      form: {
        name: '',
        area: '',
        industry: '',
        phone: '',
        delivery: false,
        resource: '',
        desc: ''
      },
      streamBuffer: '',
      formLabelWidth: '120px',
      title: "技术经理人的职责有哪些",
      tabs: [
        { id: 0, name: "W-网页" },
        { id: 1, name: "P-专利库" },
        { id: 2, name: "R-成果库" }
      ],
      activeTab: 0, // 默认选中第一个 Tab
      conversation: [],
      currentTab: "W1",
      listData: [],
      placeholderText:'提出技术需求，快速匹配成果',
      isFocused: false,
      isUserScrolling: false, // 标志位，记录用户是否在手动滚动
      references: {
        W1: [],
        P2: [
        ],
        R3: [
        ]
      }
    };
  },
  onLoad() {
      // 监听键盘高度变化
      uni.onKeyboardHeightChange(res => {
  		console.log((res))
        if (res.height > 0) {
          // 键盘弹起时，调整页面布局
          this.keyboardHeight = 40;
        } else {
          // 键盘收起时，恢复原状
          this.keyboardHeight = 0;
        }
      });
    },
  methods: {
	  tapeText(e){
	  		  this.searchQuery=e
	  		  this.keywordShow=true
	  },
    // 新建对话
    addDialogue(){
      // this.$emit('reload'); // 发出自定义事件
	  this.keywordShow=!this.keywordShow
    },
     // 重新生成消息
     regenerateMessage(message) {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      if (this.lastUserMessage) {
        this.getMessage(this.lastUserMessage);
      }
    },
    onScroll(ev) {
      const chatContainer = this.$refs.chatContainer;
      this.showArrow = (chatContainer.scrollHeight - (chatContainer.scrollTop + chatContainer.clientHeight)) > 10;

      // 如果滚动条未到最底部，认为用户在手动滚动
      if (Math.abs(chatContainer.scrollTop + chatContainer.clientHeight - chatContainer.scrollHeight) > 1) {
        this.isUserScrolling = true;
      } else {
        this.isUserScrolling = false;  // 用户滚动到底部时，恢复自动滚动
      }

    },

    // 自动滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        
        const chatContainer = this.$refs.chatContainer;
        if (chatContainer) {
          const scrollHeight = chatContainer.scrollHeight;
          if (this.isUserScrolling) {
            console.log(327)
            return;
          }
          console.log(322)
          chatContainer.scrollTop = scrollHeight; // 滚动到底部
        }
      });
    },

     // 复制到剪贴板
     copyToClipboard(text) {
      this.$message({
            message: '复制成功',
            type: 'success'
          });
    },
    toUnfold(){
      this.citeSourceShow =!this.citeSourceShow
    },
    handleFocus() {
      // 当input获得焦点时，清空placeholder
      this.placeholderText = '';
      this.isFocused = true;
    },
    handleBlur() {
      // 当input失去焦点时，如果input没有内容，则恢复placeholder
      if (!this.inputValue) {
        this.placeholderText = '提出技术需求，快速匹配成果';
      }
      this.isFocused = false;
    },
     // 停止流操作
     stopStreaming() {
      this.isStreaming = false; // 设置标志为 false，停止处理流
      this.finishBotMessage();   // 标记当前 bot 消息为已完成
      this.streamBuffer = '';    // 清空流缓存，确保不会继续拼接
      this.isLoading = false; // 停止加载状态
      this.isTyping = false; // 重置打字状态
    },
    // web 跳出
    toLink(item) {
      window.open(item.url, '_blank'); // 在新标签页中打开链接
    },
    changeTab(tab, webSiteLength, patentLength, achievementLength) {

      // 以防万一，使用 text 而非 id 判断
      const tabName = (tab.name || "").trim()
      if (tabName.indexOf("网页") > -1) {
        if (!webSiteLength) return;
      } else if (tabName.indexOf("成果库") > -1) {
        if (!achievementLength) return;
        return;
      } else if (tabName.indexOf("专利库") > -1) {
        if (!patentLength) return;
      }

      // 没数据的时候，禁止跳转
      this.activeTab = tab.id;
    },
    // 提交用户查询
    submitSearch() {
      if (this.searchQuery.trim()) {
        this.lastUserMessage = this.searchQuery; // 保存用户消息
        this.conversation.push({ type: 'user', text: this.searchQuery });
        this.scrollToBottom(); // 自动滚动到底部
        this.getMessage(this.searchQuery);  // 获取机器人回复
        this.searchQuery = ''; // 清空输入框
        this.isLoading = true;
      }
    },
    // 初始化 bot 消息，将其添加到 conversation 中
    startBotMessage() {
      this.currentBotText = ''; // 重置当前 bot 文本
      this.conversation.push({ type: 'bot', text: this.currentBotText, completed: false });
    },
    // 获取流式消息
    async getMessage(searchQuery) {
      try {
        this.isUserScrolling = false
        //const ids = checkAndSetUserAndConversationId();
        this.isStreaming = true; // 每次请求时重置流控制
        const token = 'app-B5lsfDhp9OevdYsiwxYojlop';
		const url = 'https://platformai.imaibj.cn/v1/chat-messages'
		const header = {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
		const data = JSON.stringify({
            response_mode: 'streaming',
            query: searchQuery,
            //user: ids.userId,
            inputs: { "question_type": "4", "output_type": '1' },
			user: 'abc-456',
            conversation_id: this.conversationId
          })
   // const token = 'app-B5lsfDhp9OevdYsiwxYojlop';
   //        const response = await fetch('http://www.imaibj.cn/v1/chat-messages', {
   //          method: 'POST',
   //          headers: {
   //            'Content-Type': 'application/json',
   //            'Authorization': `Bearer ${token}`
   //          },
   //          body: JSON.stringify({
   //            response_mode: 'streaming',
   //            query: searchQuery,
   //            inputs: { "question_type": "4", "output_type": '1' },
   //            user: 'abc-456',
   //            conversation_id: this.conversationId
   //          }),
   //        });
		const isH5 = 0;
		if(isH5){
			const response = await fetch(url, {
			  method: 'POST',
			  headers: header,
			  body: data,
			});
			if (response.ok) {
			  const reader = response.body.getReader();
			  const decoder = new TextDecoder('utf-8');
			  let done = false;

			  while (!done) {
				if (!this.isStreaming) break; // 如果停止流，则退出循环
				const { value, done: readerDone } = await reader.read();
				done = readerDone;

				if (value) {
				  const chunk = decoder.decode(value, { stream: true });
				  await this.processStreamChunk(chunk); // 处理流式数据块
				}
			  }
			} else {
			  console.error('Response error:', response.status);
			}
		
		}else{
			console.log('start uni.request')
			const requestTask = uni.request({
				url: url,
				timeout: 15000,
				method: 'POST',
				responseType: 'arraybuffer',
				enableChunked: true,  //配置这里
				header: header,
				data: data,
				success: response => {
					//console.log(response)
				},
				fail: error => {}
			})
			//@ts-ignore
			requestTask.onHeadersReceived(function(res) {
				//console.log(res.header);
			});
			//@ts-ignore
			requestTask.onChunkReceived(async (res) => {
				//let decoder = new TextDecoder('utf-8')
				//let text = decoder.decode(new Uint8Array(res.data),{ stream: true })
				
				let udata = new Uint8Array(res.data)
				let text = '';
				for (let i = 0; i < udata.length; i++) {
				  text += String.fromCharCode(udata[i]);
				}
				//console.log('receive chunk data: ',text)
				await this.processStreamChunk(text) // 处理流式数据块
			})			
		}
      } catch (error) {
        console.error('Fetch error:', error);
      }finally {
        //this.isStreaming = false;  // 流式处理结束
        this.isLoading = false;
      }
    },

    // 处理流式数据块
    async processStreamChunk(chunk) {
      if (!this.isStreaming) return; // 检查是否停止流处理
      this.streamBuffer += chunk;

      let endIndex;
      while ((endIndex = this.streamBuffer.indexOf('\n\n')) !== -1) {
        const block = this.streamBuffer.slice(0, endIndex);
        this.streamBuffer = this.streamBuffer.slice(endIndex + 2); // 移除已处理的部分
		//console.log('processStreamChunk:',block)
        try {
          const jsonStr = block.replace('data:', '').trim();
          if (jsonStr.startsWith('{') && jsonStr.endsWith('}')) {
            const jsonData = JSON.parse(jsonStr);

            // 只在第一次获取到 conversation_id 时赋值
            if (!this.hasSetConversationId && jsonData.conversation_id) {
                this.conversationId = jsonData.conversation_id; // 更新 conversationId
                this.hasSetConversationId = true; // 设置标志为 true
              }

            // 检查 node_finished 事件，并确认 title 为 "refjson_output"
            if (jsonData.event === 'node_finished' && jsonData.data.title === 'refjson_output') {

              // 1. 清理字符串
              let jsonString = jsonData.data.outputs.output.trim(); // 去掉首尾空白字符
              // 使用正则表达式提取 JSON 对象
              let jsonArray = jsonString.match(/{.*?}/g);

              // 将提取到的字符串数组转换为 JSON 对象数组
              let resultArray1 = jsonArray.map(item => JSON.parse(item)).filter((item, index, array) => {
                return item.ref_type == "web";
              });
              let resultArray2 = jsonArray.map(item => JSON.parse(item)).filter((item, index, array) => {
                return item.ref_type == "patent_lib";
              });
              let resultArray3 = jsonArray.map(item => JSON.parse(item)).filter((item, index, array) => {
                return item.ref_type == "achievement_lib";
              });
              console.log(351, resultArray1)
              console.log(351, resultArray2)
              console.log(351, resultArray3)
              // 如果需要将对象转换为数组，可以根据需要选择数组的格式
              this.webSiteLength = null,
                this.references.W1 = []

              this.patentLength = null,
                this.references.P2 = []

              this.achievementLength = null,
              this.references.R3 = []

              this.webSiteLength = resultArray1.length,
              this.patentLength = resultArray2.length,
              this.achievementLength = resultArray3.length,
              this.references.W1 = resultArray1
              this.references.P2 = resultArray2
              this.references.R3 = resultArray3

              // 根据条件设置activeTab
              if (this.webSiteLength > 0) {
                this.activeTab = 0;
              } else if (patentLength > 0) {
                this.activeTab = 1;
              } else if (this.achievementLength > 0) {
                this.activeTab = 2;
              }
            }
            // 针对每个 `message` 事件立刻展示消息，而不是等待全部消息
            if (jsonData.event === 'message') {
			  //console.log('message:',jsonData.answer)
              if (!this.isTyping) {
				console.log('change typing mode')
                this.startBotMessage();
                this.isTyping = true;
              }
              this.isLoading = false;
              // 每次收到新的 message 就立刻触发打字效果逐字显示
              await this.typewriterEffect(jsonData.answer);
            } else if (jsonData.event === 'message_end') {
              this.finishBotMessage();
              this.isTyping = false;
			  this.isStreaming = false;
              console.log('Message stream ended');
            } else if (jsonData.event === 'workflow_finished') {
              console.log('Workflow finished:', jsonData);
            } else if (jsonData.event === 'error') {
              console.log('异常了', jsonData)
              this.isLoading = false;
			  this.isStreaming = false;
              this.errorMessage = ''
              this.errorMessage = '网络异常'
              this.$refs.errorModal.show();  // 调用子组件的show方法显示弹框
            } else {
              //console.warn('Unhandled event type:', jsonData.event);
            }
          } else {
            console.warn('Received non-JSON data:', block);
          }
        } catch (error) {
          console.error('Failed to process chunk:', block, error);
        }
      }
    },

    // 实现打字机效果
    async typewriterEffect(text) {
		console.log(text.length)
		if(text.length<10){
			if (!this.isStreaming) return; // 检查是否停止打字效果
			const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
			if (botMessage) {
				let messageText = botMessage.text || '';
				messageText += text;
				botMessage.text = messageText;
				this.scrollToBottom();
			  
			  if(generateWeightedRandomNumber()>0){
				await this.delay(generateWeightedRandomNumber());
			  }
			  }
		}else{
		const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
		console.log('typeEffect1:',text)
		if (botMessage) {
		 let fullText=text
		      let index = 0;
		
		      const interval = setInterval(() => {
		        if (index <= fullText.length) {
		          botMessage.text = fullText.slice(0, index);
		          index++;
				  this.scrollToBottom();
		        } else {
		          clearInterval(interval); // 停止计时器
		        }
		      }, 50);
			  }
			  }
    },

    // 结束 bot 消息
    finishBotMessage() {
      const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
      if (botMessage) {
        botMessage.completed = true;
      }
    },

    // 延迟函数
    delay(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    },


  },
};
</script>

<style lang="scss" scoped>
//@import "@/styles/chat-message.scss";
.discoverCon{
	height: 100%;
}
.main-content {
  position: relative;
  height: 100%;
}


.header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #0052cc;
  color: white;
  border: none;
  cursor: pointer;
}
.user-message{
	font-size: 26rpx;
	padding: 15rpx 30rpx;
	color: #ffffff;
	border-radius: 10rpx;
	background: linear-gradient( 330deg, #2C57F3 0%, #027BFF 100%);
	margin-bottom: 20px;
}
	
.bot-message{
	padding: 15rpx;
	// padding-bottom: 30rpx;
	background-color: #ffffff;
	margin-bottom: 20px;
}
.bot-message-container,
.user-message-container {
  display: flex;
  align-items: flex-start;
}

.bot-message-container {
  justify-content: flex-start;
  /* 机器人消息居左 */
}

.user-message-container {
  justify-content: flex-end;
  /* 用户消息居右 */
}

.bot-icon,
.user-icon {
  // font-size: 24px;
  margin: 0 0.5vw;
}
.user-icon {
  margin-right: 0;
  img {
    width: 8vw;
	height:5vh;
  }
}

.bot-icon {
  margin-left: 0;
  img {
    width: 8vw;
	height:5vh;
  }
}
.citeSource{
  display: flex;
  flex-direction: column;
  align-items: end;
}
.reference-bar {
  // margin-left: 40px;
  width: 414px;
  height: calc(100vh - 162px);
  background-color: #ffffff;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 20px;

  ul {
    padding: 0;
    margin-left: 28px;
    margin-right: 28px;
    margin-top: 20px;
    max-height: calc(100vh - 300px);
    overflow: auto;
  }

  h3 {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 0.8vw;
    display: block;
    color: #000000;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    padding-left: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
  }

  .tabs {
    width: 358px;
    height: 52px;
    background: #F2F5FA;
    border-radius: 12px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;

    div {
      width: 114px;
      height: 36px;
      background: #F2F5FA;
      border-radius: 8px;
      text-align: center;
      line-height: 36px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 0.75vw;
      color: #677190;
      font-style: normal;
      cursor: pointer;
    }

    .active {
      background: #FFFFFF;
      box-shadow: 0px 2px 8px 0px rgba(220, 223, 234, 0.8);
      border-radius: 8px;
      color: #000000;
      font-weight: bold;
    }
  }
}

.tabs {
  display: flex;
  margin-bottom: 10px;
}

.tabs button {
  flex: 1;
  padding: 10px;
  background-color: #e0e0e0;
  border: none;
  cursor: pointer;
}

.tabs button.active, .tabs button.active div {
  background-color: #0052cc;
  color: white;
}

.reference-item {
  margin-bottom: 16px;
  border-bottom: 1px solid #F2F5FA;
  cursor: pointer;
}
.content{
	overflow-y: auto;
	height: calc(100% - 60px);
}
.messageCon{
	// height: 100vh;
}
.reference-item-web {
  .reference-content {
    display: flex;
    width: 100%;
    // border-bottom: 1px solid #000;
    margin-bottom: 16px;
    flex-direction: column;

    .webTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 0.8vw;
      color: #000000;
      line-height: 27px;
      text-align: left;
      font-style: normal;
      margin-top: 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .webText {
      font-family: PingFangSC, PingFang SC;
      font-size: 0.75vw;
      color: #677190;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reference-contentTp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .contentTitle {
        display: flex;
        align-items: center;
        width: 80%;
      }

      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 0.75vw;
        color: #677190;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }

      .contentName {
        width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 0.75vw;
        color: #677190;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }

      .updateTime {
        margin-left: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.75vw;
        color: #677190;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        white-space: nowrap;
      }

      .label {
        // width: 25px;
        height: 17px;
        padding: 0 4px;
        background: #FF5E0D;
        border-radius: 8px 8px 8px 1px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 0.65vw;
        color: #FFFFFF;
        line-height: 17px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}

.reference-item-patent {
  .reference-content {
    .reference-contentTp {
      .label {
        background: #2CC6FC;
      }
    }

    .buttJoint {
      width: 80px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid #0053F3;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 0.75vw;
      color: #0053F3;
      line-height: 30px;
      text-align: center;
      font-style: normal;
      margin-top: 12px;
      cursor: pointer;
    }
  }

}

.reference-content {
  background-color: white;
  border-radius: 5px;
}

.input-bar {
  // display: flex;
  // align-items: center;
  // background-color: #F2F5FA;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  box-shadow: 0px 4px 10px 0px #EDEDED;
  
  border-radius: 10rpx;
  // padding-top: 20px;

  &--arrow {
    &:after {
      position: absolute;
      left: 50%;
      top: 6px;
      content: " ";
      border: 5px solid transparent;
      border-top-color: rgba(0, 83, 243, 1);
      transform: translate3d(-50%, 0, 0);
    }
  }
}

.image-upload {
  margin-right: 10px;
}

.upload-icon {
  width: 40px;
  height: 40px;
}

.input-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
  background-color: white;
  padding: 5px;
  border-radius: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}

.icon-inside-input {
  margin-right: 10px;
}

/* 搜索栏区域样式 */
.search-area {
  display: flex;
  align-items: center;
  // margin-left: 50px;
  // margin-right: 92px;
  // width: calc(100% - 142px);
  width: 100%;
  padding: 10px;
  position: relative;
  img {
 //    width: 8vw;
	// height:6vh;
  }
  .icon_arrow{
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
  }
}

.search-input {
  display: flex;
  align-items: center;
  width: calc(100% - 80rpx);
  // padding: 10px;
  height: 3vh;
  border-radius: 16px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 0px solid #EAEAEA;
}
.load-icon{
	width: 30rpx;
	height: 38rpx;
}
.load-icon1{
	width: 38rpx;
	height: 38rpx;
}
.stop-icon{
	width: 50rpx;
	height: 50rpx;
}
.search-input input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 26rpx;
  padding: 5px;
}
.anzhu{
	flex-grow: 1;
	border: none;
	outline: none;
	font-size: 24rpx;
	padding: 5px;
	text-align: center;
}

.search-input input::placeholder {
  font-family: PingFangSC, PingFang SC;
  font-size: 24rpx;
  color: #505050;
  letter-spacing: 1px;
  text-align: left;
  font-style: normal;
}

.search-input .send-button {
  display: flex;
  align-items: center;
  // background-color: #1C48EC;
  color: #fff;
  padding: 0;
  height: 40px;
  border-radius: 10px;
  margin-left: 18px;
  cursor: pointer;
  font-size: 0.75vw;
  width: 6vw;
  height: 6vh;
  img {
    // width: 100%;
	width: 60rpx;
	height: 50rpx;
  }
  .send-icon{
	  width: 45rpx;
	  height: 45rpx;
  }

  span {
    margin-right: 11px;
    font-weight: 500;
    font-size: 0.8vw;
    color: #FFFFFF;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    white-space: nowrap;
  }
}

.file-upload {
  margin-left: 10px;
  padding: 10px;
  cursor: pointer;
}

.chatbot-icon {
  width: 74px;
  height: 88px;
  margin-right: 15px;
}

.send-button {
  display: flex;
  align-items: center;
  // background-color: #0052cc;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
}

/* 动画效果 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter,
.slide-right-leave-to {
  transform: translateX(100%);
}

.slide-left-leave-to,
.slide-right-enter {
  transform: translateX(-100%);
}

.icon-send {
  margin-right: 5px;
}

.welcomeSpeech {
  display: flex;
  width: 100%;
  // box-shadow: 0px 4px 16px 0px rgba(220, 223, 234, 0.4);
  border-radius: 12px;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .welcomeSpeechCn {
    display: flex;
    flex-direction: column;
	padding: 15rpx;
	background-color: #ffffff;
	border-radius: 10rpx;

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #3D3D3D;
      line-height: 3vh;
      text-align: left;
      font-style: normal;
    }

    span:first-child {
      margin-bottom: 2px;
    }
  }
}

.button-p {
  width: 100%;
  height: 40px;
  background: #0053F3;
  box-shadow: 0px 4px 16px 0px rgba(103, 113, 144, 0.2);
  border-radius: 8px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 0.8vw;
  color: #FFFFFF;
  line-height: 40px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  cursor: pointer;
}

.bot-button {
    // display: flex;
    margin-right: 2.5vw;
	text-align: right;
    // margin-top: -50px;
    // justify-content: flex-end;
>view{
	display: inline-block;
}
    img {
		width: 20px;
		height: 20px;
		margin-left: 20px;
    }

    .copy {
      height: 3vh;
      border-radius: 8px;
      // border: 1px solid #EAEAEA;
      // display: flex;
      // align-items: center;
      // padding: 6px 12px;
      // margin-right: 0.5vw;
      cursor: pointer;
      margin-bottom: 0.5vh;

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.65vw;
        color: #677190;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        // margin-left: 4px;
      }
    }

    .reset {
      height: 3vh;
      border-radius: 8px;
      // border: 1px solid #EAEAEA;
      // display: flex;
      // align-items: center;
      // padding: 6px 12px;
      cursor: pointer;

      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.65vw;
        color: #677190;
        line-height: 17px;
        text-align: left;
        font-style: normal;
        margin-left: 4px;
      }
    }
  }
</style>
<style scoped lang="scss">
.classDialog {
  border-radius: 20px !important;
}

.classDialog .el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 0.75vw;
  color: #000000;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-bottom: 16px;
}

.classDialog .el-dialog__header {
  text-align: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 20px;
  color: #000000;
  line-height: 28px;
  font-style: normal;
}

.el-menu-item,
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  margin-bottom: 16px;
}

.el-submenu__title i {
  display: none;
}

.el-submenu .el-menu {
  margin-bottom: 16px;
}

.el-submenu .el-menu-item {
  height: 20px !important;
  line-height: 20px !important;
  padding-left: 46px !important;
  margin-bottom: 16px !important;
  min-width: 146px !important;

}

.el-submenu .is-active {
  border: none !important;
  border-right: 3px solid #0053F3 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.el-dialog__body {
  padding: 10px 20px !important;
}

.el-form-item {
  margin-bottom: 10px !important;
}

.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
}
::v-deep { 
	/* rich-text {
		font-size: 4vw !important;
	} */
		
	.zero-markdown-view-markdown {
		font-size: 26rpx;
		color: #3D3D3D;
	}
}


</style>
<style scoped>
	.aaaaa{
		position: absolute !important;
		/* left: 1px; */
		/* width: 200px; */
		    bottom: 10px;
			z-index: 9 !important;
			/* background-color: aqua; */
	}
</style>